<include file="Pc:Includes/header" />
<include file="Pc:Includes/menu" />
<style>
    .comment-layer{
        display:none;
        position: fixed;
        width: 100%;
        height:100%;
        left:0;
        top:0;
        background-color:rgba(0,0,0,.5);
        z-index: 10;
    }
    /*����*/
    .comment-main{
        position: relative;
        width: 800px;
        margin: 0 auto;
        padding:50px;
        top:50%;
        transform: translateY(-50%);
        background-color: #fff;
    }
    .comment-main .main-close{
        font-size: 35px;
        position: absolute;
        top:20px;
        right:12px;
        line-height: 0;
        cursor:pointer;
    }
    /*
        ���
    */
    .comment-main .list-left{
        width:200px;
        height:200px;
        float: left;
    }
    .comment-main .list-left img{
        display: block;
        width:100%;
        height:100%;
    }
    /*�Ҳ�*/
    .comment-main .list-right{
        /*margin-left: 230px;*/
        font-size: 15px;
        color:#666666;
    }
    /*������*/
    .right-title .star-item{
        display: inline-block;
        margin-left: 5px;
    }

    .right-title .star-item .star-list{
        display: inline-block;
        cursor: pointer;
        color:#333;
        letter-spacing:3px;
    }
    /*������*/
    .list-right .comment-content{
        position: relative;
    }
    .comment-content textarea{
        position: relative;
        width:100%;
        margin-top: 10px;
        height:139px;
        padding:10px;
        outline: none;
        resize:none;
    }
    /*��������*/
    .comment-content .count-item{
        position: absolute;
        width:200px;
        left:100%;
        top:100%;
        margin-left:-220px;
        margin-top: -35px;
        color:#999;
    }
    .comment-content .count-item span{
        display: inline-block;
        width:40px;
        text-align: center;
    }
    /*ͼƬ�б�*/
    .comment-img{
        width:60%;
        margin-top: 10px;
        float: left;
    }
    .comment-img .img-list{
        position: relative;
        float: left;
        width:60px;
        height:60px;
        margin-right: 10px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        cursor: pointer;

        background-repeat:no-repeat;
        background-size:cover;
    }
    .comment-img .img-list:hover .list-layer{
        opacity: 1;
    }
    .comment-img .img-list .list-layer{
        position: relative;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .4);
        color: #fff;
        opacity: 0;
        text-align: center;
        transition: opacity .3s;
    }

    .comment-img .list-layer i{
        position: absolute;
        font-size:40px;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
    }


    .comment-img .img-list img{
        display: inline-block;
        width:100%;
        height:100%;
    }


    /*ʮ�����*/
    .img-list-add label{
        z-index: 10;
        display: block;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
    .img-list-add:after,.img-list-add:before{
        position: absolute;
        content: "";
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
        background-color:#999;
        z-index: -1;
    }

    .img-list-add:after{
        width:30px;
        height:4px;
    }
    .img-list-add:before{
        width:4px;
        height:30px;
    }

    .comment-info{
        float: left;
        color:#999;
        margin-top: 10px;
    }

    /*
        ��ť
    */
    .btn-sub{
        display:block;
        float: right;
        margin-top:25px;
        border: none;
        outline: none;
        height:35px;
        width:185px;
        /*line-height: 50px;*/
        font-size: 16px;
        text-align: center;
        color:#fff;
        background: black;
        cursor:pointer;
    }
    .btn-sub:hover{
        opacity: 0.9;
    }

    /*���۲鿴��ť*/
    .comment-item{
        text-align: right;
    }
    .comment-btn,.check-btn{
        display: none;
        border: none;
        padding: 8px 0;
        text-align: center;
        width: 120px;
        color: #fff;
        border-radius: 5px;
        cursor: pointer;
        outline: none;
        line-height: normal;
    }
    .comment-btn{background-color: #000000;}
    .check-btn{background-color: #ccc;}
    .comment-btn:hover{opacity: .8}
    .comment-item .item-detail{
        margin-left: 10px;
        font-weight: bold;
    }

</style>
<div class="section-wrap ucenter-page">
    <div class="section fix">
        <include file="Pc:Ucenter/common_menu" />
        <div class="hc-right">
            <h2 class="hc-right__title"><?php LL('COMMON_ACCOUNT_MY_ORDERS'); ?></h2>
            <div class="hc-right__content">
            <?php if(empty($list)){ ?>
            <p class="myorder-empty"><?php LL('MWMBER_HAVE_NO_PREVIOUS'); ?> <a href="/" style="text-decoration: underline;"><?php LL('COMMON_SHOP_NOW'); ?></a></p>
            <?php } ?>

            <?php foreach($list as $l){?>
                <div class="myorder-item" data-name="<?php if($l['pay_time'] > 0){echo 'pay';} ?>">
                    <div class="myorder-item__head">
                        <p class="fix">
                            <span class="myorder-num"><strong><?php LL('MEMBER_NUMBER'); ?></strong>.<?php echo $l['order_sn']?></span>
                            <span class="myorder-time"><?php echo $l['add_date']?></span>
                            <span class="myorder-status"><?php echo $l['status_str']?></span>
                        </p>
                        <div class="myorder-price fix">
                            <p class="myorder-price__text"><?php LL('COMMON_TOTAL'); ?>: <?php echo $l['currency_symbol']; ?><?php echo $l['final_price'];?></p>
                            <?php if($l['status_str']== L('MWMBER_ORDER_STATUS_PENDING') && !$only_show_cancel_btn && $l['pay_id'] != $codPay){ ?>
	                            <a class="btn btn-black btn-myorder" href="/Checkout/payment/?order_id=<?php echo $l['order_sn']?>"><?php LL('COMMON_PAY_NOW'); ?></a>
	                            <?php if($l['status_str']==L('MWMBER_ORDER_STATUS_PENDING')){ ?>
	                            <a class="btn btn-grey btn-myorder"  href="javascript:void(0);" onclick="OrderCancel('/MyOrder/OrderCancel', '<?php echo $l['order_sn'];?>');return false;"><?php LL('COMMON_CANCEL'); ?></a>
	                            <?php } ?>
                            <?php } ?>
                        </div>
                    </div>
                    <div class="myorder-item__body">
                    <?php foreach($l['package'] as $package){?>
                        <?php foreach($package as $ll){?>
                        <div class="media">
                            <!--��¼�ϴ�ͼƬ��ƷSKU-->
                            <input name="sku" type="hidden" value="<?php echo $ll['goods_sn'] ?>">
                            <!--��¼��Ʒid-->
                            <input name="tid" type="hidden" value="<?php echo $ll['order_goods_id'] ?>">
                            <!--��¼�����ϴ�����-->
                            <input type="hidden" name="order" value="<?php echo $ll['order_sn']?>">
                            <div class="media-left">
                                <div>
                                    <a href="<?php echo $ll['view_url'];?>">
                                        <img src="<?php echo $ll['thumbnail_img_path'];?>" alt="<?php echo $ll['goods_name'];?>">
                                    </a>
                                </div>
                            </div>
                            <div class="media-body">
                                <div class="myorder-product-info">
                                    <p>
                                        <a class="trans-ignore" href="<?php echo $ll['view_url'];?>">
                                            <?php echo isset($goods_name_lang[$ll['goods_id']])?$goods_name_lang[$ll['goods_id']]:$ll['goods_name'];?>
                                        </a>
                                    </p>
                                    <div>
                                        <?php LL('COMMON_COLOR'); ?>:
                                        <?php echo $ll['goods_attr']['color'];?>
                                        <br> <?php LL('COMMON_SIZE'); ?>:
                                        <?php echo $ll['goods_attr']['size'];?>
                                        <br>
                                    </div>
                                    <div class="myorder-product-info__price fix">
                                        <span class="lang-price" data-currency="<?php echo $ll['currency_code'] ?>" data-price="<?php echo $ll['goods_price'];?>">$<?php echo $ll['goods_price'];?></span>
                                        <span class="r">x <?php echo $ll['quantity'];?></span>
                                    </div>

                                    <!--�Ƿ���ʾ-->
                                    <div class="comment-item">
                                        <button type="button" class="comment-btn" data-img="<?php echo $ll['thumbnail_img_path'];?>"><?php LL('MWMBER_WRITE_REVIEW'); ?></button>
                                        <a href="<?php echo $ll['view_url'];?>" class="check-btn" data-img="<?php echo $ll['thumbnail_img_path'];?>"><?php LL('MWMBER_CHECK_REVIEW'); ?></a>
                                        <!--<span class="item-detail">*EARN A US <span style="color:#d00dd0;">$5 COUPON</span></span>-->
                                    </div>

                                </div>
                            </div>
                        </div>
                        <?php }?>
                    <?php }?>
                        <div class="myorder-product-view">
                            <a href="/customer/orders/view/order_<?php echo $l['order_sn'];?>.html"><?php LL('MEMBER_VIEW_ORDER'); ?></a>
                            <?php if($l['pay_time']>0){ ?>
                            <span>
                                <i class="iconfont icon-download" style="margin:0 5px"></i>
                                <a style="width: auto;margin-left:3px;" href="/Checkout/InvoicePdf/?order_sn=<?php echo $l['order_sn']?>"><?php LL('MEMBER_DOWNLOAD_INVOICE'); ?></a>
                            </span>
                            <?php } ?>
                        </div>
                    </div>
                </div>
            <?php } ?>
            </div>
            <div class="pagination">
                {$pages}
            </div>
        </div>
    </div>
</div>

<div class="comment-layer">
    <div class="comment-main fix">

        <form action="" method="post" enctype="multipart/form-data">
            <!--<div class="list-left"><a href="<?php echo $val['url'];?>"><img src="<?php echo $val['imgUrl'];?>" alt="<?php echo $val['goods_name'];?>" title="<?php echo $val['goods_name'];?>"></a></div>
            --><div class="list-right">
            <div class="right-title">
                <span><?php LL('ORDER_REVIEW_OVERALL_RATING'); ?>:</span>
                <div id="jRate" class="jRate star-item"></div>
                <!--<ul class="star-item">
                    <li class="star-list iconfont icon-star0 icon-start1"></li>
                    <li class="star-list iconfont icon-star0 icon-start1"></li>
                    <li class="star-list iconfont icon-star0 icon-start1"></li>
                    <li class="star-list iconfont icon-star0 icon-start1"></li>
                    <li class="star-list iconfont icon-star0 icon-start1"></li>
                </ul>-->
                <input type="hidden" name="star" value="5"/>
            </div>
            <div class="mt5"><?php LL('ORDER_REVIEW_CONTENT'); ?>:</div>
            <!--��д������-->
            <div class="comment-content">
                <textarea name="content" id="" cols="30" rows="10" placeholder="<?php LL('ORDER_REVIEW_CONTENT_TEXT'); ?>"></textarea>
                <div class="count-item">
                    <?php LL('ORDER_REVIEW_REMAINING',array('<span class="count">1000</span>')); ?>
                </div>
            </div>
            <!--ͼƬԤ��-->
            <ul class="comment-img fix" data-name="<?php echo $val['order_goods_id'];?>">
                <li class="img-list img-list-add"><label><input id="file" type="file" class="hidden" multiple></label></li>
            </ul>
            <input type="button" class="btn-sub" value="<?php LL('SUBMIT_YOUR_REVIEW'); ?>"/>
            <p class="comment-info"><?php LL('ORDER_REVIEW_PHOTOS_LIMIT'); ?></p>
        </div>
        </form>
        <i class="main-close">&times;</i>
    </div>
</div>

<script>
    function OrderCancel(request_url, order_id) {
        if (confirm(Lang_Are_you_sure_you_want_to_cancel_the_order)) {
            if (request_url) {
                jQuery.ajax({
                    url: request_url,
                    type: "POST",
                    dataType: 'json',
                    data: {
                        "order_id": order_id
                    },
                    success: function(data) {
                        if (data) {
                            alert(Lang_Cancelled_Successfully);
                            window.location = window.location;
                        } else {
                            alert(Lang_Operation_failed);
                        }
                    }
                });
            }
        }
    }
</script>

<include file="Pc:Includes/common_script" />
<script src="/resources-pc/script/lib/jQuery.XDomainRequest.js"></script>
<script src="/resources-pc/script/lib/jRate.js"></script>
<script type="text/javascript">

    $("#jRate").jRate({
        rating:5,
        strokeColor: 'black',
        width: 20,
        height: 20,
        shapeGap:'5px',
        onChange: function(rating) {
            console.log("OnChange: Rating: "+rating);
        },
        onSet: function(rating) {
            console.log("OnSet: Rating: "+rating);
        }
    });

    //****************************************************
    var up = {
        arrImg : [],
        tid:'',
        sku:'',
        extra:'',
        link:"<?php echo C('SITE_COMMENT'); ?>",
        initEvent:function(){
            var _this = this;
            $('#file').on('change',function(){
                var that = $(this);
                //У��ͼƬ��ʽ
                var mes = _this.readFileRule(that,1000,5);
                if(mes.type){
                    _this.upLoadImg(that);
                }else{
                    if(mes.name == 1){
						alert(Lang_Picture_size_should_be_less_than_1000Kb);
					}else if(mes.name == 2){
						alert(Lang_The_picture_is_not_in_the_correct_format);
					}else if(mes.name == 3){
						alert(Lang_The_number_of_pictures_has_exceeded_five);
					}
                    that.val('')
                }
            });

            //ɾ���¼�
            $('body').on('click','.list-layer',function(){
                var parent = $(this).parent('.img-list');
                _this.arrImg.splice(parent.index(),1);
                parent.remove();
            });

            //��
            $(".media-body").on('click','.comment-btn',function(){
                var that = $(this);
                //��ȡ��ǰ���۵Ķ����ż���SKU
                _this.tid = that.parents('.media').find("input[name='tid']").val();
                _this.sku = that.parents('.media').find("input[name='sku']").val();
                _this.extra = that.parents('.media').find('.media-left').find('a').attr('href');
                $(".comment-layer").fadeIn(100);
                $('body').css('overflow','hidden');
            });
            //�ر�
            $('.main-close').on('click',function(){
                _this.clear();
                $(".comment-layer").hide();
                $('body').css('overflow','auto')
            });
            //����
            $('.star-list').on({
                mouseenter:function(){
                    var num = $(this).index();
                    var box = $(this).parent('.star-item').find('.star-list');
                    box.each(function(index,item){
                        if(index<=num){
                            $(item).addClass('icon-start1');
                        }else{
                            $(item).removeClass('icon-start1');
                        }
                    })
                },
                click:function(){
                    var num = $(this).index();
                    $(this).parent('.star-item').attr('data-val',num);
                    $(this).parents('.right-title').find("input[name='star']").val(num+1);
                }
            });

            $('.star-item').on('mouseleave',function(){
                var val = $(this).attr('data-val');
                var box = $(this).find('.star-list');
                if(val){
                    box.each(function(index,item){
                        if(index<=val){
                            $(item).addClass('icon-start1');
                        }else{
                            $(item).removeClass('icon-start1');
                        }
                    })
                }else{
                    box.addClass('icon-start1');
                }
            });
            //�ı�
            $('textarea').on({
                input:function(){
                    var _this = $(this);
                    var num = $(this).val().length;
                    if(Number(num)>=1000){
                        _this.val(_this.val().slice(0,1000));
                        _this.parent('.comment-content').find('.count').css('color','red').text(0);
                        return;
                    }else{
                        _this.parent('.comment-content').find('.count').css('color','#999');
                    }
                    _this.parent('.comment-content').find('.count').text(1000-num);
                }
            });

            _this.filter();
        },

        //У��ͼƬ��ʽ
        readFileRule:function(file,size,num){
            var fileDom = file[0].files;
            var mes = {type:true,name:0}
            for(var i = 0;i<fileDom.length;i++){
                if((fileDom[i].size/1000)>size){
                    mes.name = 1;
                    mes.type = false;
                    break;
                }else if(!/(jpeg)|(png)|(jpg)$/.test(fileDom[i].type)){
                    mes.name = 2;
                    mes.type = false;
                    break;
                }
            }
            if(fileDom.length+this.arrImg.length > num){
                mes.name = 3;
                mes.type = false;
            }
            return mes;
        },

        upLoadImg:function(input){
            var _this = this;
            var inputObj = input;
            var fd = new FormData();
            for(var i=0;i<inputObj[0].files.length;i++){
                fd.append('file[]',inputObj[0].files[i]);
            }
            fd.append('tid',_this.tid);
            $.ajax({
                type : 'post',
                url : _this.link+'comment/upload?',
                data : fd,
                cache : false,
                processData : false,
                contentType : false,
                success : function(data){
                    _this.saveImgUrl(data,inputObj)
                },
                error : function(err){
                    console.log(err)
                }
            })
        },

        saveImgUrl:function(data,input){
            var _this = this;
            var arr = data.split('|');
            var str = '';
            var pr = input.parents('.img-list-add');
            $.each(arr,function(index,item){
                var template = '<li class="img-list">' +
                        '<div class="list-layer"><i>&times;</i></div>' +
                        '</li>';
                var tempObj = $(template);
                    tempObj.css('background-image',"url("+item+")");
                str+=tempObj[0].outerHTML;
                _this.arrImg.push(item);
            });
            pr.before(str);
            input.val('')
        },
        upLoad:function(){
            var _this = this;
            var name = $('.hc-useremail').text();
            var star = $("input[name='star']").val();
            var content = $("textarea[name='content']").val();
            var imgStr = '';
            if(_this.arrImg.length){
                imgStr = _this.arrImg.join('|');
            }
            $.ajax({
                type:'post',
                url:_this.link+'comment/insert?'+'type=0&'+'&tid='+_this.tid+'&username='+name+'&grade='+star+'&imgs='+imgStr+'&spu=' + _this.sku + '&extra=' + _this.extra,
                data:{
                    content:content
                },
                success:function(res){
                    if(res.code == 1){
                        alert(Lang_Your_comments_have_been_saved_successfully);
                        _this.clear();
                        $(".comment-layer").hide();
                        location.reload();
                    }
                },
                error:function(xhr,err,msg){
                    console.log(err);
                }
            });
        },
        clear:function(){
            this.arrImg.splice(0,this.arrImg.length);
            $('.img-list-add').prevAll('.img-list').remove();
            $('textarea').val('');
            $('.star-list').last().trigger('click').end().addClass('icon-start1');
            $('.count').text(1000);
        },
        filter:function(){
            var _this = this;
            var commented = {};
            var payObj = [];

            $("[data-name='pay']").each(function(index,item){
                $(item).find("input[name='tid']").each(function(index,item){
                    payObj.push($(this).val())
                });
            });

            $.ajax({
                type:'get',
                url:_this.link+'comment/count?'+'type=0&tid='+payObj.join(',') + '&date='+new Date().getTime(),
                success:function(res){
                    if(res.code == 1){
                        commented = res.data;
                        $("[data-name='pay']").each(function(index,item){
                            $(item).find('.media').each(function(indexChind,itemChind){
                                var obj = $(itemChind);
                                var v = obj.find("input[name='tid']").val();
                                if(commented[v] ){
                                    //obj.find('.comment-item').hide()
                                    obj.find('.check-btn').css('display','inline-block')
                                }else{
                                    //obj.find('.comment-item').show()
                                    obj.find('.comment-btn').show()
                                }
                            });
                        })
                    }
                },
                error:function(xhr,err,msg){
                    console.log(err);
                }
            });

        }
    };
    up.initEvent();

    //�ύ�¼�
    $('.btn-sub').on('click',function(ev){
        if(!$('textarea').val()){
            alert(Lang_please_write_something)
        }else{
            up.upLoad();
        }
    });


    //��ǰ״̬
    var url = location.href;
    if(/wait_confirm/.test(url)){
        $("[data-type='wait_confirm']").addClass('active');
    }else if(/wait_pay/.test(url)){
        $("[data-type='wait_pay']").addClass('active');
    }else if(/completed/.test(url)){
        $("[data-type='completed']").addClass('active');
    }else{
        $("[data-type='all']").addClass('active');
    }
</script>
<include file="Pc:Includes/footer" />